{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>awesome-spider</title>
    <link rel="stylesheet" type="text/css" href="{% static 'account/css/login.css' %}">
    <link rel="icon" href="{% static 'account/img/logo.png' %}" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a81368914c.js"></script>
    <script type="text/javascript" src="{% static 'account/script/jquery-3.5.1.js' %}"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style type="text/css">
    #error .errorMsg {
        float: right;
        margin-left: 10px;
        margin-top: 10px;
        color: red;
    }
</style>
<script>
    $(function () {
        $("#origin").blur(function () {
            let originpwdText = $("#origin").val();

            let originpwdPatt = /^\w{5,12}$/;

            if ((originpwdPatt.test(originpwdText)) || $("#origin").val() == "") {

                $(".errorMsg").text("");
            } else {

                $(".errorMsg").text("原密码不合法！");
            }
        });
        $("#new").blur(function () {

            let newpasswordText = $("#new").val();

            let newpasswordPatt = /^\w{5,12}$/;

            if ((newpasswordPatt.test(newpasswordText)) || $("#new").val() == "") {

                $(".errorMsg").text("");
            } else {
                $(".errorMsg").text("新密码不合法！");
            }
        });


        $("#new1").blur(function () {
            let passwordText = $("#new").val();
            let repwdText = $("#new1").val();
            if ((passwordText == repwdText) || $("#new1").val() == "") {
                $(".errorMsg").text("");

            } else {
                $(".errorMsg").text("确认新密码和新密码不一致！");

            }
        });


        $("#sub_btn").click(function () {

            let originpwdText = $("#origin").val();

            let originpwdPatt = /^\w{5,12}$/;

            let newpasswordText = $("#new").val();

            let newpasswordPatt = /^\w{5,12}$/;

            let repwdText = $("#new1").val();

            if ((originpwdPatt.test(originpwdText)) && (newpasswordPatt.test(newpasswordText)) && (newpasswordText == repwdText)) {
                return true;
            } else {
                alert("修改信息不符合要求！");
                return false;
            }
        })
    })


</script>
<body>
<img class="wave" src="{% static 'account/img/wave.png' %}">
<div class="container">
    <div class="img">
        <img src="{% static 'account/img/bg.svg' %}">
    </div>
    <div class="login-content">
        <form method="post" action="/account/changepwd.do">
            <h2 class="title">修改密码</h2>
            <div id="error">
                <span class="errorMsg"></span>
            </div>

            <div class="input-div one">
                <div class="i">
                    <i class="fas fa-user"></i>
                </div>
                <div class="div">
                    <h5>原密码</h5>
                    <input type="text" id="origin" name="origin" class="input">
                </div>
            </div>

            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                    <h5>新密码</h5>
                    <input type="password" id="new" name="new" class="input">
                </div>
            </div>

            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                    <h5>确认新密码</h5>
                    <input type="password" id="new1" name="new1" class="input">
                </div>
            </div>
            <input type="hidden" name="identity" value="normal">
            {% csrf_token %}
            <input type="submit" class="btn" id="sub_btn" value="修 改">
        </form>
    </div>
</div>
<script type="text/javascript" src="{% static 'account/js/main.js' %}"></script>
</body>
</html>